<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
           需求:当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法
           验证的规则是: 必须由字母，数组，下划线组成，并且长度时5-12位
         */
        function onclickFun() {
            // 1 当我们要操作一个标签的时候，一定要先获取这个标签对象。
            var usernameObj = document.getElementById("username");
            // [object HTMLInputElement] 它就是 dom 对象
            // alert(usernameObj.value);
            var usernametext = usernameObj.value;
            //使用正则表达式验证
            var patt= /^\w{5,12}$/;
            /**
             * test()方法用于测试某个字符串，是不是匹配我的规则
             * 匹配就返回true，否则返回false
             */


            var userNameSpan = document.getElementById("usernamespan");
            // innerHTML 表示起始标签和结束标签中的内容
            // innerHTML 这个属性可读 可写
            userNameSpan.innerHTML = "智哥真帅";

            if (patt.test(usernametext)) {
                // alert("用户合法");
                // userNameSpan.innerHTML = "用户合法";
                userNameSpan.innerHTML=  "<img src= \"right.png\" width=\"18\" height=\"18\"/>"; //这里要转义 不然会报错
            } else {
                // alert("用户不合法");
                // userNameSpan.innerHTML = "用户不合法"
                userNameSpan.innerHTML=  "<img src= \"wrong.png\" width=\"18\" height=\"18\"/>";
            }

        }
    </script>
</head>
<body>
用户名：<input type="text" id="username" value="fzr"/>
<span style="color: red" id="usernamespan">

</span>
<button onclick="onclickFun()">按钮</button>

</body>
</html>